<template>
  <div class="housering">
    <div class="header">
      <div class="header_count">
        <div>
          <span>楼盘</span>
          <input type="text" placeholder="请输入楼盘名称搜索" />
        </div>
        <div>最新分享</div>
      </div>
    </div>
    <div class="header_count1">
      <div class="header_count1_count">
        <span
          :class="index === active ? 'active' : null"
          @click="tiao1(index)"
          v-for="(item, index) in title"
          :key="index"
          >{{ item }}</span
        >
      </div>
    </div>
    <div class="main_tite">
      <div class="main_title1">
        <div
          v-for="(item, index) in uutitle"
          :key="index"
          :class="item.id === active1 ? 'active1' : null"
          @click="search(item.id)"
        >
          <span>{{ item.title }}</span>
          <span>{{ item.count }}</span>
        </div>
      </div>
    </div>
    <div class="main_conunt">
      <div v-for="(item, index) in newlist" :key="index" class="mian_count22">
        <div class="shang">
          <div class="zuo">
            <img :src="item.prelogo" alt="" />
            <div>
              <h4>{{ item.build_title }}</h4>
              <p>{{ item.adviser_level_name }}</p>
            </div>
          </div>
          <div class="you">
            <span @click="chatting1()"> 微聊 </span>
            <span @click="call(item.tel)"> 电话咨询 </span>
          </div>
        </div>
        <div class="xia">
          <div class="you1">
            <div>{{ item.content }}</div>
            <div v-for="(item1, index) in item.attached" :key="index">
              <img :src="item1.path" alt="" />
            </div>
            <div class="timer">{{ item.ctime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titelType from "../../../mock/home/HouseTypes.json";
import uulist from "../../../mock/home/HouseRing.json";
export default {
  data() {
    return {
      title: ["楼市圈", "楼盘动态", "小区专家"],
      active: 0,
      uutitle: [],
      uulist: [],
      active1: 0,
      newlist: [],
    };
  },
  methods: {
    // 楼市圈....
    tiao1(index) {
      console.log(this.uutitle);
      this.active = index;
      if (index === 0) {
        return false;
      } else if (index === 1) {
        uni.navigateTo({ url: "/pages/home/BuildingDyNamic/BuildingDyNamic" });
      } else {
        uni.navigateTo({ url: "/pages/home/ExpertVillage/ExpertVillage" });
      }
    },
    // 点击全部,文字,图片,
    search(typeId) {
      console.log(typeId);
      this.active1 = typeId;
      if (typeId === 0) {
        return (this.newlist = uulist);
      }
      this.newlist = this.uulist.filter((item) => {
        return item.adviser_levelid === typeId;
      });
    },
    // 电话咨询
    call(tel) {
      wx.makePhoneCall({
        phoneNumber: tel, //仅为示例，并非真实的电话号码
      });
    },
    //微聊
    chatting1() {
      wx.navigateTo({
        url: "/pages/home/Chatting/Chatting",
      });
    },
  },
  created() {
    this.uutitle = titelType;
    this.uulist = uulist;
    if (this.newlist.length == 0) {
      this.newlist = this.uulist;
    }
  },
};
</script>

<style lang="scss" scoped>
.housering {
  width: 100%;
  height: 100%;
  .header_count1 {
    width: 100%;
    height: 90rpx;
    border-bottom: 1rpx solid #ccc;
    .header_count1_count {
      margin: 0 auto;
      width: 76%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .active {
        color: #dc2f5aed;
        font-weight: bold;
      }
    }
  }
  .main_conunt {
    width: 100%;
    .mian_count22 {
      width: 95%;
      margin: 15rpx auto;
      display: flex;
      flex-direction: column;
      .shang {
        width: 100%;
        height: 100rpx;
        display: flex;
        flex-direction: row;
        .zuo {
          width: 50%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          > div {
            text-decoration: 50rpx;
            width: calc(100% - 60rpx);
            > h4 {
              font-weight: bold;
            }
            > p {
              margin-top: 5rpx;
              color: #ccc;
              font-size: 23rpx;
            }
          }
          > img {
            margin-right: 30rpx;
            width: 55rpx;
            height: 55rpx;
            border-radius: 50%;
          }
        }
        .you {
          width: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > span {
            width: 150rpx;
            height: 60rpx;
            line-height: 60rpx;
            border: 1px solid #ff656b;
            color: #ff656b;
            text-align: center;
            border-radius: 4rpx;
            box-shadow: 0 2rpx 4rpx 0;
          }
        }
      }
      .xia {
        width: 90%;
        margin: 0 auto;
        display: flex;
        .you1 {
          width: 100%;
          height: 100%;
          > div:nth-child(1) {
            margin: 10rpx 0;
          }
          > div:nth-child(2) {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            margin-top: 20rpx;
            > img {
              width: 100%;
            }
          }
          .timer {
            width: 100%;
            line-height: 110rpx;
            text-align: right;
            color: rgb(145, 141, 141);
          }
        }
      }
    }
  }

  .main_tite {
    width: 100%;
    .main_title1 {
      width: 86%;
      height: 80rpx;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      > div {
        width: 115rpx;
        text-align: center;
        font-size: 20rpx;
        line-height: 50rpx;
        border: 1rpx solid #ccc;
      }
      > div.active1 {
        color: white;
        background: rgb(95, 91, 91);
      }
    }
  }
  .header {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .header_count {
      width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      > div:nth-child(1) {
        > span:nth-child(1) {
          border-right: 1rpx solid #fff;
          padding-right: 8rpx;
        }
        width: 70%;
        height: 80%;
        display: flex;
        background-color: #ccc;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 10rpx;
      }
      > div:nth-child(2) {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #ccc;
      }
    }
  }
}
</style> 